// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const searchInput = document.getElementById('searchInput');
    const searchResults = document.getElementById('searchResults');
    const randomBtn = document.getElementById('randomBtn');
    const typeRadios = document.getElementsByName('type');
    
    // 合并数据
    const data = {
        'zh-cn': window.data_zh_cn,
        'zh-tw': window.data_zh_tw,
        'en': window.data_en
    };
    
    // 当前搜索类型（前缀或后缀）
    let currentType = 'prefix';
    
    // 监听搜索类型变化
    typeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            currentType = this.value;
            performSearch();
        });
    });
    
    // 监听搜索输入
    searchInput.addEventListener('input', function() {
        performSearch();
    });
    
    // 随机生成按钮
    randomBtn.addEventListener('click', function() {
        generateRandom();
    });
    
    // 执行搜索
    function performSearch() {
        const query = searchInput.value.trim().toLowerCase();
        
        // 显示加载状态
        searchResults.innerHTML = '<div class="loading"></div>';
        
        // 使用setTimeout让UI有时间显示加载状态
        setTimeout(() => {
            let results = [];
            
            if (query === '') {
                // 如果没有搜索词，显示所有结果
                const items = data['zh-cn'][currentType + 'es'];
                for (let i = 0; i < items.length; i++) {
                    results.push({
                        'zh-cn': data['zh-cn'][currentType + 'es'][i],
                        'zh-tw': data['zh-tw'][currentType + 'es'][i],
                        'en': data['en'][currentType + 'es'][i]
                    });
                }
            } else {
                // 搜索匹配项
                const items = data['zh-cn'][currentType + 'es'];
                for (let i = 0; i < items.length; i++) {
                    const zhCnItem = data['zh-cn'][currentType + 'es'][i].toLowerCase();
                    const zhTwItem = data['zh-tw'][currentType + 'es'][i].toLowerCase();
                    const enItem = data['en'][currentType + 'es'][i].toLowerCase();
                    
                    if (zhCnItem.includes(query) || zhTwItem.includes(query) || enItem.includes(query)) {
                        results.push({
                            'zh-cn': data['zh-cn'][currentType + 'es'][i],
                            'zh-tw': data['zh-tw'][currentType + 'es'][i],
                            'en': data['en'][currentType + 'es'][i]
                        });
                    }
                }
            }
            
            displayResults(results);
        }, 100);
    }
    
    // 显示搜索结果
    function displayResults(results) {
        if (results.length === 0) {
            searchResults.innerHTML = '<div class="no-results">没有找到匹配的结果</div>';
            return;
        }
        
        let html = '';
        results.forEach(item => {
            html += `
                <div class="result-row">
                    <div class="col">${item['zh-cn']}</div>
                    <div class="col">${item['zh-tw']}</div>
                    <div class="col">${item['en']}</div>
                </div>
            `;
        });
        
        searchResults.innerHTML = html;
    }
    
    // 随机生成
    function generateRandom() {
        const items = data['zh-cn'][currentType + 'es'];
        const randomIndex = Math.floor(Math.random() * items.length);
        
        const result = {
            'zh-cn': data['zh-cn'][currentType + 'es'][randomIndex],
            'zh-tw': data['zh-tw'][currentType + 'es'][randomIndex],
            'en': data['en'][currentType + 'es'][randomIndex]
        };
        
        // 清空搜索框
        searchInput.value = '';
        
        // 显示结果
        searchResults.innerHTML = `
            <div class="result-row">
                <div class="col">${result['zh-cn']}</div>
                <div class="col">${result['zh-tw']}</div>
                <div class="col">${result['en']}</div>
            </div>
        `;
    }
    
    // 初始加载所有前缀
    performSearch();
});